<template>
    <header class="home-header">
        <div class="link-box">
            <router-link to="/home/home-main/follow" active-class="active">
                <div class="line"><span>关注</span></div>
            </router-link>
            <router-link to="/home/home-main/recommend" active-class="active">
                <div class="line"><span>推荐</span></div>
            </router-link>
            <router-link to="/home/home-main/talk" active-class="active">
                <div class="line"><span>杂谈</span></div>
            </router-link>
            <router-link to="/home/home-main/request" active-class="active">
                <div class="line"><span>请求</span></div>
            </router-link>
        </div>
        <div class="header-right" @click="toSearch">
            <svg t="1636541265631" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2422" width="200" height="200"><path d="M966.4 924.8l-230.4-227.2c60.8-67.2 96-156.8 96-256 0-217.6-176-390.4-390.4-390.4-217.6 0-390.4 176-390.4 390.4 0 217.6 176 390.4 390.4 390.4 99.2 0 188.8-35.2 256-96l230.4 227.2c9.6 9.6 28.8 9.6 38.4 0C979.2 950.4 979.2 934.4 966.4 924.8zM102.4 441.6c0-185.6 150.4-339.2 339.2-339.2s339.2 150.4 339.2 339.2c0 89.6-35.2 172.8-92.8 233.6-3.2 0-3.2 3.2-6.4 3.2-3.2 3.2-3.2 3.2-3.2 6.4-60.8 57.6-144 92.8-233.6 92.8C256 780.8 102.4 627.2 102.4 441.6z" p-id="2423"></path></svg>
        </div>
    </header>
</template>
<script>
export default {
    name:"HomeHeader",
    methods:{
        toSearch(){
            this.$router.push({path:"/findSearch"})
        }
    }
}
</script>
<style lang="scss" scoped>
@import "../assets/common/base.scss";
.home-header{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 30px ; 
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    .link-box{
        flex-grow: 1;
        // line-height: 50px;
        display: flex;
        align-items: center;
        a{
            display: block;
            margin: 0 10px;
            color: #555;
            font-size: 15px;
            &.active{
                color: #000;
                font-weight: bold;
                .line{
                    height: 10px;
                    width: 45px;
                    text-align: center;
                    border-bottom: 10px solid $mainCol;
                    position: relative;
                    span{
                        height: 14px;
                        width: 45px;
                        position: absolute;
                        left: 0px;
                        bottom: 0px;
                    }
                }
                
            }
        }
    }
    .header-right{
        svg{
            width: 20px;
            height: 20px;
        }
    }
}
</style>